<%@include file="menu/util.jsp" %>
<%@page contentType="text/html; charset=iso-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <fmt:bundle basename="app">
        <head>
            <title><fmt:message key="login.title.tag" /></title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <jsp:include page="menu/header.jsp" />
            <%-- remember to name the variables the same as the attributes --%>



            <script type="text/javascript">
                
                function getXML(loading){
                    try{
                        var _loading = document.getElementById(loading);
                        //if(_loading) _loading.style.visibility="visible";
                        this.setTimeout(getXMLImp(loading), 1000);
                    }catch(ex){}
                }

                function getXMLImp(loading){
            
                    var path="ajaxTest.do";
                    var ajax = new accesoAJAX.CargadorDeDatos("POST",path,
                    function(data){
                        //alert(data);
                        document.getElementById("chartdiv").innerHTML = "";
                        var chart;
                        var legend;
                        
                        var XMLresponse = BuildXMLFromString(data);
                        var elems = XMLresponse.getElementsByTagName('country');
                        if(elems){
                            var datos = new Array();
                            for(var i=0;i<elems.length;i++){
                                var country = elems[i];
                                var latitud = country.getAttribute("country");
                                var longitud = country.get.getAttribute("data") ;

                                datos[i] = {country:latitud,litres:longitud};
                            }

                            chart = new AmCharts.AmPieChart();
                            chart.dataProvider = datos;
                            chart.titleField = "country";
                            chart.valueField = "litres";
                            chart.depth3D = 5;
                            chart.angle = 5;
                            chart.innerRadius = "30%";
                            chart.startDuration = 2;
                            chart.labelRadius = 15;

                            legend = new AmCharts.AmLegend();
                            legend.align = "center";
                            legend.markerType = "circle";
                            chart.addLegend(legend);

                            chart.write("chartdiv");
                        }
                        // document.getElementById(loading).style.visibility="hidden";
                    });
                }
                //Build XML from String returned from controller
                function BuildXMLFromString(text) {
                    if (window.DOMParser) {
                        var parser = new DOMParser();
                        try {
                            xmlDoc = parser.parseFromString(text, "text/xml");
                        } catch (e) {};
                    }
                    else {
                        xmlDoc = CreateMSXMLDocumentObject ();
                        if (!xmlDoc) {
                            //alert ("Cannot create XMLDocument object");
                            return false;
                        }
                        xmlDoc.loadXML (text);
                    }

                    var errorMsg = null;
                    if (xmlDoc.parseError && xmlDoc.parseError.errorCode != 0) {
                        errorMsg = "XML Parsing Error: " + xmlDoc.parseError.reason
                            + " at line " + xmlDoc.parseError.line
                            + " at position " + xmlDoc.parseError.linepos;
                    }
                    else {
                        if (xmlDoc.documentElement) {
                            if (xmlDoc.documentElement.nodeName == "parsererror")
                                errorMsg = xmlDoc.documentElement.childNodes[0].nodeValue;
                        }
                        else
                            errorMsg = "XML Parsing Error!";
                    }

                    if (errorMsg)
                        return null;

                    //alert ("Parsing was successful!");
                    return xmlDoc;
                }//Ends build XML



                function setLabelPosition(){

                    if(document.getElementById("rb1").checked){
                        chart.labelRadius = 30;
                        chart.labelText = "[[title]]: [[value]]";
                    }
                    else{
                        chart.labelRadius = -30;
                        chart.labelText = "[[percents]]%";
                    }
                    chart.validateNow();
                }


                function set3D(){

                    if(document.getElementById("rb3").checked){
                        chart.depth3D = 10;
                        chart.angle = 10;
                    }
                    else{
                        chart.depth3D = 0;
                        chart.angle = 0;
                    }
                    chart.validateNow();
                }

                function setSwitch(){

                    if(document.getElementById("rb5").checked){
                        legend.switchType = "x";
                    }
                    else{
                        legend.switchType = "v";
                    }
                    legend.validateNow();
                }

            </script>


        </head>
        <body>

            <div id="chartdiv" style="width: 100%; height: 400px;"></div>
            <div class="loading" id="loading_graph"></div>
            <a onclick="getXML('loading_graph');">dame click!</a>

        </body>
    </fmt:bundle>
</html>
